<template>
    <div class="video-list">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in dataList" :key="index">
                <div>
                    <videos ref="videos" :videoList="item" :index="index"></videos>
                </div>
                <div class="infobar_warp">
                    <info-bar></info-bar>
                </div>
                <div class="rightbar_warp">
                    <ringht-bar @changeCom="showComs"></ringht-bar>
                </div>
            </swiper-slide>
        </swiper>
        <!-- 评论 -->
        <transition name="up">
            <div class="comment-warp-box" v-if="showComment">
                <div class="comment-warp">
                    <div class="comment-list">
                        <div class="comment-top">
                            <div class="numaer">15.0w条评论</div>
                            <div class="close" @click="close"><span>X</span></div>
                        </div>
                        <div class="comment-body">
                            <div class="comment-box">
                                <div class="comment-item">
                                    <div class="user-pic">
                                        <img src="../../static/img/123.jpg" alt="">
                                    </div>
                                    <div class="item-info">
                                        <div class="reply">
                                            <p class="name">菜鸟切图</p>
                                            <p class="reply-des">求有更过的项目可以训练,增强自己，不放弃<span class="time">6-11</span></p>
                                        </div>
                                        <div class="zan"><span class="iconfont icon-aixin"></span><p>200</p></div>
                                    </div>
                                </div>
                                <div class="sub-comment-item">
                                    <div class="user-pic">
                                        <img src="../../static/img/123.jpg" alt="">
                                    </div>
                                    <div class="item-info">
                                        <div class="reply">
                                            <p class="name">小型象</p>
                                            <p class="reply-des">
                                                <span>回复</span>
                                                <span class="re-name">菜鸟切图</span>
                                                <span>做项目做项目</span>
                                                <span class="time">6-11</span></p>
                                        </div>
                                        <div class="zan"><span class="iconfont icon-aixin"></span><p>200</p></div>
                                    </div>
                                </div>
                                <div class="more">-------展开60条回复</div>
                            </div>
                        </div>
                        <!-- 评论框 -->
                        <div class="reply-input">
                            <input type="text" name="" id="" placeholder="留下你得精彩的评论">
                            <span class="emoji">@</span>
                            <span class="iconfont icon-pinglun"></span>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import Videos from '../../components/index/Videos'
import InfoBar from '../../components/index/InfoBar'
import RinghtBar from '../../components/index/RightBar'
export default {
    name:"VideoList",
    data(){
        return{
            showComment:false,
            page:1,
            swiperOption:{
                direction:"vertical",
                grabCursor:true,
                setWrapperSize:true,
                autoHeight:true,
                slidesPerView:1,
                mousewheel:true,
                mousewheelControl:true,
                height:window.innerHeight,
                resistanceRatio:0,
                observeParents:true,
                on:{
                    tap:()=>{
                        this.playAction(this.page -1);
                    },
                    slideNextTransitionStart: ()=>{
                        this.page += 1;
                        // alert(this.page);
                        this.nextVide(this.page - 1)
                        console.log(this.page)
                    },
                    slidePrevTransitionEnd:()=>{
                        if(this.page>1){
                            this.page -=1;
                            this.prevVideo(this.page - 1)
                            console.log(this.page);
                        }
                    }
                }
            },
            dataList:[
                {
                    id:"1",
                    url:"http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4"
                },
                {
                    id:"2",
                    url:"https://jsmov2.a.yximgs.com/bs2/newWatermark/Mjk3NTk3MzQwNjc_zh_4.mp4"
                },
                {
                    id:"3",
                    url:"https://txmov2.a.yximgs.com/bs2/newWatermark/MzAxODUwNjc0NTM_zh_4.mp4"
                },
                {
                    id:"4",
                    url:"https://txmov2.a.yximgs.com/bs2/newWatermark/MzAyMzg2MjE3NDU_zh_4.mp4"
                },
            ]
        }
    },
    methods:{
        playAction(index){
            this.$refs.videos[index].playOrStop();
        },
        nextVide(index){
            this.$refs.videos[index-1].stop();
            this.$refs.videos[index].play();
        },
        //上滑
        prevVideo(index){
            this.$refs.videos[index+1].stop();
            this.$refs.videos[index].play();
        },
        //弹出评论框
        showComs(){
            this.showComment = true;
        },
        close(){
            this.showComment = false;
        }
    },
    components: {
        Swiper,
        SwiperSlide,
        Videos,
        InfoBar,
        RinghtBar
     },
    directives: {
        swiper: directive
    }
}
</script>
<style scoped>
    .video-list{
        height: 100%;
    }
    .video-list .swiper-container{
        height: 100%;
        position: relative;
    }
    .infobar_warp{
        position: absolute;
        bottom: 65px;
        left: 0;
    }
    .rightbar_warp{
        position: absolute;
        right: 10px;
        bottom: 55px;
    }
    /* 评论 */
    .up-enter-active, .up-leave-active {
        transition: all .5s;
    }
    .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {
         opacity: 1;
         transform: translateY(100%);
    }   
    .comment-warp-box{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 500px;
        width: 100%;
        background: #fff;
        z-index: 88;
    }
    .comment-warp{
        position: fixed;
        bottom: 60px;
        left: 0;
        height: 500px;
        width: 100%;
        background: #fff;
        border-top-left-radius:10px ;
        border-top-right-radius:10px;
        z-index: 999;
        padding: 10px 10px;
        box-sizing: border-box;
    }
    .comment-top{
        display: flex;
        align-items: center;
    }
    .numaer{
        flex: 1;
        text-align: center;
    }
    .close{
        padding-right: 10px;
        font-size: 30px;
        color: #6666;
    }
    .comment-body{
        max-height: 450px;
        overflow: auto;
        margin-top: 20px;
    }
    .comment-item{
        display: flex;
    }
    .user-pic img{
        width: 33px;
        height: 33px;
        border-radius: 50%;
    }
    .item-info{
        margin-left: 10px;
        display: flex;
        flex: 1 1 auto;
    }
    .reply{
        width: 90%;
    }
    .reply-des{
        line-height: 24px;
    }
    .reply .name{
        color: #666;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .reply .time{
        color:#666;
    }
    .zan .iconfont{
        font-size: 20px;
        color: #ccc;
        margin: 0 10px;
    }
    .zan p{
        color: #ccc;
        margin-top: 5px;
    }
    .sub-comment-item{
        display: flex;
        margin-left: 33px;
        margin-top: 10px;
    }
    .re-name{
        padding: 0 10px;
        color: #666;
    }
    .more{
        margin-left: 33px;
        margin-top: 20px;
    }
    .reply-input{
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .reply-input input{
        line-height: 40px;
        width: 70%;
        border: none;
        padding: 0 10px;
    }
    .reply-input .emoji{
         font-size: 30px;
        color: #ccc;
        margin-right: 6%;
    }
    .reply-input .iconfont{
        font-size: 26px;
        color: #ccc;
    }
</style>